<!-- 活动台账卡片 -->
<template>
	<view class="shadow radius card-box">
		<view @click="$goBack('./detail?param='+param(info))">
			<view class="card-top">
				<text class="text">
					{{info.vehCode}}
					<template v-if="info.trailerNo">
						·{{info.trailerNo}}
					</template>
				</text>
				<view class="line"></view>
				<text class="status">{{getStatusText(info.checkStatus)}}</text>
			</view>
			<view class="card-center">
				<view class="center-item">
					<text class="type">驾</text>
					<text class="name">{{info.driverName}}</text>
					<!-- <text class="phone">13333333333</text> -->
				</view>
				<!-- <view class="center-item">
				<text class="type" type="2">押</text>
				<text class="name">张三</text>
				<text class="phone">13333333333</text>
			</view> -->
			</view>
			<view class="card-bottom">
				<view class="bottom-item">
					<text class="label">活动事由：</text>
					<text class="content">{{getTypeText(info.type)}}</text>
				</view>
				<view class="bottom-item">
					<text class="label">开始时间：</text>
					<text class="content">{{info.moveStartTime}}</text>
				</view>
				<view class="bottom-item">
					<text class="label">结束时间：</text>
					<text class="content">{{info.moveEndTime}}</text>
				</view>
			</view>
		</view>
		<view class="item-btn">
			<view class="btn btn-edit" v-if="info.checkStatus!='1'" @click="$goBack('./edit?param='+param(info))"><text>修改</text></view>
			<view class="btn btn-judge" v-if="userType==2 && info.checkStatus==''" @click="judgeConfirm = true">
				<text>审核</text>
			</view>
			<view class="btn btn-del" v-if="info.checkStatus!='1'" @click="showConfirm = true"><text>删除</text></view>
		</view>
		<modal-confirm :data="confirmData" :visible.sync="showConfirm" @confirm="delConfirm"></modal-confirm>
		<modal-judge :visible.sync="judgeConfirm" @confirm="judgeChange"></modal-judge>
	</view>
</template>

<script>
	import modalConfirm from '@/components/tool-modal/modal-confirm';
	import modalJudge from '@/components/tool-modal/modal-judge';
	export default {
		components: {
			modalConfirm,
			modalJudge
		},
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				judgeConfirm: false,
				showConfirm: false,
				confirmData: {
					title: '提示信息',
					content: "此操作将永久删除，是否继续？"
				},
				type: [{
					"value": "1",
					"text": "车辆维修"
				}, {
					"value": "2",
					"text": "普通运输"
				}, {
					"value": "3",
					"text": "车辆年检"
				}, {
					"value": "4",
					"text": "罐体检验"
				}, {
					"value": "5",
					"text": "车辆保养"
				}, {
					"value": "6",
					"text": "非民用运输"
				},{
						"value": "7",
						"text": "空车运行"
					},{
						"value": "8",
						"text": "其他"
					}],
			}
		},
		computed: {
			userType() {
				return this.$store.state.userInfo.userRoleType;
			}
		},
		methods: {
			param(obj) {
				return JSON.stringify(obj);
			},
			getTypeText(value) {
				const res = this.type.find(item => item.value === value);
				if (res) {
					return res.text;
				}
				return '';
			},
			getStatusText(value) {
				if (value == "0") {
					return "审核不通过";
				} else if (value == "1") {
					return "审核通过";
				} else if (value == "") {
					return "待审核";
				} else {
					return "";
				}
			},
			judgeChange(changeData) {
				// console.log(changeData);
				this.$api.mgntvehnotransSubmit({
					...this.info,
					...changeData,
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: this.getStatusText(changeData.checkStatus),
						success: () => {
							setTimeout(() => {
								this.$emit('refreshList'); // 刷新列表
							}, 1500); // showToast默认时间
						}
					});
				})
			},
			// 删除事件
			delConfirm() {
				this.$api.mgntvehnotransSubmit({
					...this.info,
					isDeleted: 1,
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: '删除成功',
						success: () => {
							setTimeout(() => {
								this.$emit('refreshList'); // 刷新列表
							}, 1500); // showToast默认时间
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card-box {
		position: relative;
		background-color: #FFFFFF;
		padding: 30rpx;

		.card-top {
			border-bottom: 1rpx solid #F2F2F2;
			padding-bottom: 20rpx;

			.text {
				font-size: 28rpx;
				line-height: 56rpx;
				font-weight: bold;
			}

			.line {
				position: absolute;
				left: 0;
				top: 40rpx;
				background-color: $app-color;
				width: 6rpx;
				height: 32rpx;
			}

			.status {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 28rpx;
				font-weight: bold;
				line-height: 1.8em;
				padding: 0 0.4em;
				background-color: $app-color;
				border-radius: 0 10rpx 0 10rpx;
			}
		}

		.card-center {
			padding: 30rpx 0;

			.center-item {
				position: relative;
				display: flex;

				.type {
					width: 48rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					background-color: #4CAF50;
					color: #FFFFFF;
					border-radius: 50%;
					font-size: 28rpx;

					&[type="2"] {
						background-color: #2196F3;
					}
				}

				.name {
					font-weight: bold;
					font-size: 28rpx;
					line-height: 48rpx;
					padding: 0 1em;
				}

				.phone {
					color: #666666;
					flex: 1;
					line-height: 48rpx;
				}

				&:nth-child(n+2) {
					padding-top: 30rpx;

					&::after {
						content: "";
						position: absolute;
						left: 21rpx;
						top: 6rpx;
						width: 4rpx;
						height: 18rpx;
						background-color: #333;
					}
				}
			}
		}

		.card-bottom {
			.bottom-item {
				display: flex;
				font-size: 28rpx;
				line-height: 1em;
				padding: 0.4em 0;

				.label {
					color: #666666;
				}

				.content {
					color: #333333;
				}
			}
		}

		.item-btn {
			text-align: right;
			padding-top: 20rpx;

			.btn {
				display: inline-block;
				line-height: 1em;
				border-radius: 70rpx;
				border: 2rpx solid #666666;
				color: #666666;
				padding: 0.4em 1em;
				font-size: 28rpx;
				margin-left: 15rpx;
			}

			.btn-del {
				border-color: $app-color;
				color: $app-color;
			}
		}
	}
</style>
